<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ JSON.stringify(text) == '{}' ? '添加活动审批节点' : '修改活动审批节点' }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form-model ref="ruleForm" :model="form" :rules="rules">
					<a-form-model-item label="学生组织类型" prop="ClubTypeID" v-if="ClubTypeID">
						<a-select optionFilterProp="children" showSearch v-model="form.ClubTypeID" disabled>
							<template v-for="(item, index) in ClubTypeList">
								<a-select-option :key="item.ID">{{ item.Name }}</a-select-option>
							</template>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="学生组织" prop="clubID" v-if="clubID">
						<a-select optionFilterProp="children" showSearch v-model="form.clubID" disabled>
							<template v-for="(item, index) in ClubList">
								<a-select-option :key="item.ID">{{ item.Name }}</a-select-option>
							</template>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="课程类型" prop="activityTypeID">
						<a-tree-select :allowClear="true" show-search @change="selectChangetree"
							v-model="form.activityTypeID" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							:tree-data="ActivityTypeApplyList" tree-default-expand-all :replace-fields="replaceFields"
							placeholder="请选择课程类型"></a-tree-select>
					</a-form-model-item>
					<a-form-model-item label="活动级别" prop="activityLevelID">
						<a-select v-model="form.activityLevelID">
							<template v-for="(item, index) in LevelList">
								<a-select-option :key="item.ID">{{ item.Name }}</a-select-option>
							</template>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="审批类型" prop="ActivityFlowTypeID">
						<a-select v-model="form.ActivityFlowTypeID" show-search :filter-option="filterOption"
							option-filter-prop="children" :autoClearSearchValue="false">
							<template v-for="(item, index) in ActivityFlowTypeList">
								<a-select-option :key="item.ID">{{ item.Name }}</a-select-option>
							</template>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="" class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">
							{{ JSON.stringify(text) == '{}' ? '确认添加' : '确认修改' }}
						</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-model-item>
				</a-form-model>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		AddApplyActivityFlow,
		UpdateApplyActivityFlow
	} from '@/api/follow';
	export default {
		props: {
			text: Object,
			ActivityTypeApplyList: Array,
			LevelList: Array,
			ActivityFlowTypeList: Array,
			ClubTypeList: Array,
			ClubList: Array,
			ClubTypeID: String,
			clubID: String,
			activityTypeID: String,
			activityLevelID: String
		},
		watch: {
			text: function(text) {
				if (JSON.stringify(text) == '{}') {
					this.form.ClubTypeID = this.ClubTypeID;
					if (this.activityLevelID != '') {
						this.form.activityLevelID = this.activityLevelID;
					}
					if (this.activityTypeID != '') {
						this.form.activityTypeID = this.activityTypeID;
					}

					this.form.clubID = this.clubID;
					console.log(this.activityTypeID);
				} else {
					this.form = text;
					this.form.ClubTypeID = this.ClubTypeID;
				}
			}
		},
		data() {
			return {
				replaceFields: {
					children: 'children',
					title: 'title',
					key: 'ID',
					value: 'ID'
				},
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				DepartmenDropdowntList: [],
				form: {
					ClubTypeID: '',
					ActivityFlowTypeID: '',
					activityLevelID: '',
					activityTypeID: ''
				},
				rules: {
					// activityTypeID: [{
					// 	required: true,
					// 	message: '请选择课程类型',
					// 	trigger: 'change'
					// }],
					// activityLevelID: [{
					// 	required: true,
					// 	message: '请选择活动级别',
					// 	trigger: 'change'
					// }],
					ActivityFlowTypeID: [{
						required: true,
						message: '请选择表单类型',
						trigger: 'change'
					}],
					ClubTypeID: [{
						required: true,
						message: '请选择是否必填',
						trigger: 'change'
					}]
				}
			};
		},
		created() {},
		methods: {
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			},
			selectChangetree(e) {
				console.log(e);
				this.form.activityTypeID = e
			},
			closeFunction(data) {
				this.$emit('closeFun', data);
				this.form = {};
			},
			handleSubmit(e) {
				console.log(this.form);
				this.$refs.ruleForm.validate(async valid => {
					if (valid) {
						let data = this.form;
						let res = {};
						if (JSON.stringify(this.text) == '{}') {
							res = await AddApplyActivityFlow(data);
						} else {
							res = await UpdateApplyActivityFlow(data);
						}
						if (res.data.code === 0) {
							this.$message.success(res.data.msg);
							this.closeFunction('1');
						} else {
							this.$message.error(res.data.msg);
						}
					} else {
						return false;
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form-item {
		margin: 20px 50px;
		display: flex;
	}

	/deep/.ant-form-item-label {
		width: 120px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}

	/deep/.ant-form {
		margin-top: 50px;
		padding-bottom: 50px;
	}
</style>
